<template>
    <div class="page flex-row" v-loading="loading">
        <div class="left-container flex-column flex1">
            <div class="title-container" v-if="env === 'development'" >
                <div class="title">
                    <span class="primary">智慧</span>运营管理平台
                </div>
                <div class="title-en">Intelligent operation management platform</div>
            </div>
            <div class="title-container" v-else >
                <div class="title">
                    <span class="primary">安防手段</span>运维监控评估与呈现
                </div>
                <div class="title-en">Evaluation and presentation of  maintenance and monitoring of security measures</div>
            </div>
            <div class="desc-list" v-if="env === 'development'">
                <div class="desc-item flex-row flex-item" v-for="(text, index) in descList" :key="index">
                    <div class="mark"></div>
                    <div class="content">{{ text }}</div>
                </div>
            </div>
        </div>
        <div class="right-container flex-column">
            <div class="login-title">账号登录</div>
            <div class="form-container">
                <el-form :model="user" :rules="rules" ref="user" label-width="0">
                    <el-form-item prop="username">
                        <el-input class="login-input" v-model="user.username"></el-input>
                    </el-form-item>
                    <el-form-item prop="passString">
                        <el-input class="login-input" v-model="user.passString" type="password"></el-input>
                    </el-form-item>
                    <el-form-item label="">
                        <div class="flex-row">
                            <div class="flex1"></div>
                            <el-checkbox v-model="user.remember">记住我</el-checkbox>
                        </div>
                    </el-form-item>
                    <el-button style="width: 100%" type="primary" @click="login">登录</el-button>
                </el-form>
            </div>
        </div>
        <div class="version">v0.0.1.1</div>
    </div>
</template>

<script>
// import router from '@/router';
import {getStorage, setStorage} from '@/utils/storage';
import { mapActions } from 'vuex';
// import test from './test'
export default {
  name: 'index',
  components: {
  },
  mixins: [
    // test
  ],
  data() {
    return {
      env: '',
      user: {
        remember: false,
        username: '',
        passString: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        passString: [
          { required: true, message: '请输入用户密码', trigger: 'blur' }
        ],
      },
      loading: false,
      descList: ['全方位系统整合', '多类型数据搜索', '全平台数据共享', '定制化研判分析']
    }
  },
  methods: {
    ...mapActions('userInfo', ['updateUserInfo']),
    ...mapActions('dict', ['updateDeviceTypes']),
    login() {
      this.$refs.user.validate((valid) => {
        if (valid) {
          this.loading = true
          const { username, passString, remember } = this.user
          this.$http.post('/sys/user/login', { username, password: passString }).then(res => {
            setStorage('token', res.token)
            this.updateUserInfo().then(() => {
              this.updateDeviceTypes()
              if (this.$route.query.redirect_uri) {
                this.$router.replace({
                  path: decodeURIComponent(this.$route.query.redirect_uri)
                })
              } else {
                this.$router.replace({
                  path: '/home'
                })
              }
              setStorage('user-login-account', remember ? this.user : null)
            })
          }).catch(err => {
            this.$TZmessage.error(err.msg || '登录失败')
          }).finally(() => {
            this.loading = false
          })
        } else {
          return false;
        }
      });
    },
    keyDownFunc(event) {
      if (event.key === 'Enter') {
        this.login(); // 模拟按钮点击
        event.preventDefault(); // 阻止默认的表单提交行为（如果有的话）
      }
    }
  },
  mounted() {
    const user = getStorage('user-login-account')
    if (user) {this.user = {...user}}
    document.addEventListener('keydown', this.keyDownFunc);
    setStorage('token', '')
    this.env = process.env.NODE_ENV
  },
  destroyed() {
    document.removeEventListener('keydown', this.keyDownFunc)
  }
}
</script>

<style lang="scss" scoped>
    .page {
        padding: 0;
        background: #ffffff;
        .left-container {
            background-color: red;
            background: url("/src/assets/login/left-bg.png");
            background-size: cover;
            .title-container {
                margin-left: 175px;
                margin-top: 130px;
                .title {
                    font-family: Microsoft YaHei, Microsoft YaHei;
                    font-weight: bold;
                    font-size: 50px;
                    color: #28292D;
                    line-height: 61px;
                    font-style: normal;
                    letter-spacing: 10px;
                    .primary {
                        color: #3074FB;
                    }
                }
                .title-en {
                    font-family: PingFang SC, PingFang SC;
                    font-size: 14px;
                    color: #4E5257;
                    line-height: 61px;
                    letter-spacing: 3px;
                    text-transform: uppercase;
                }
            }
            .desc-list {
                margin-left: 155px;
                margin-top: 30px;
                .desc-item {
                    height: 80px;
                    font-family: PingFang SC, PingFang SC;
                    font-size: 24px;
                    color: #323437;
                    .mark {
                        width: 20px;
                        height: 20px;
                        background: #257EF2;
                        transform: rotate(45deg);
                        margin: 20px;
                    }
                }
            }
        }
        .right-container {
            width: 560px;
            padding-left: 102px;
            .login-title {
                margin-top: 240px;
                font-family: PingFang SC, PingFang SC;
                font-weight: bold;
                font-size: 34px;
                color: #141516;
            }
            .form-container {
                width: 350px;
                margin-top: 50px;
            }
        }
        .version {
            position: absolute;
            bottom: 0;
            text-align: center;
            width: 100%;
            line-height: 30px;
            /*color: #ffffff;*/
        }
    }
</style>